<template>
  <div>
    <y-shelf title="收货地址">
      <span slot="right"><y-button text="添加收货地址" style="margin: 0" @btnClick="update()" /></span>
      <div slot="content">
        <div v-if="addList.length">
          <div v-for="(item,i) in addList" :key="i" class="address-item">
            <div class="name">{{ item.receiver }}</div>
            <div class="address-msg">{{ item.streetName }}</div>
            <div class="telephone">{{ item.phone }}</div>
            <div class="defalut">
              <a
                href="javascript:;"
                :class="{'defalut-address':item.isDefault}"
                @click="changeDef(item)"
                v-text="item.isDefault?'( 默认地址 )':'设为默认'"
              />
            </div>
            <div class="operation">
              <a href="javascript:;" @click="update(item)">修改</a>
              <a href="javascript:;" :data-id="item.id" @click="del(item.id,i)">删除</a>
            </div>
          </div>
        </div>
        <div v-else>
          <div style="padding: 80px 0;text-align: center">
            <div style="font-size: 20px">你还未添加收货地址</div>
            <div style="margin: 20px ">
              <y-button text="添加地址" @btnClick="update()" />
            </div>
          </div>
        </div>
      </div>
    </y-shelf>
    <y-popup :open="popupOpen" :title="popupTitle" @close="popupOpen = false">
      <div slot="content" class="md" :data-id="msg.id">
        <div>
          <input v-model="msg.receiver" type="text" placeholder="收货人姓名">
        </div>
        <div>
          <input v-model="msg.phone" type="number" placeholder="手机号码">
        </div>
        <div>
          <input v-model="msg.streetName" type="text" placeholder="收货地址">
        </div>
        <div>
          <span><input v-model="msg.isDefault" type="checkbox" style="margin-right: 5px;">设为默认</span>
        </div>
        <y-button
          text="保存"
          class="btn"
          :class-style="btnHighlight?'main-btn':'disabled-btn'"
          @btnClick="save({id:msg.id,receiver:msg.receiver,phone:msg.phone,streetName:msg.streetName,isDefault:msg.isDefault})"
        />
      </div>
    </y-popup>
  </div>
</template>
<script>
import { addressList, addressUpdate, addressAdd, addressDel } from '@/api/address'
import YButton from '@/components/YButton'
import YPopup from '@/components/popup'
import YShelf from '@/components/shelf'
export default {
  components: {
    YButton,
    YPopup,
    YShelf
  },
  data() {
    return {
      addList: [],
      popupOpen: false,
      popupTitle: '管理收货地址',
      msg: {
        id: '',
        userId: '',
        receiver: '',
        phone: '',
        streetName: '',
        isDefault: false
      }
    }
  },
  computed: {
    btnHighlight() {
      const msg = this.msg
      return msg.receiver && msg.phone && msg.streetName
    }
  },
  created() {
    this.getAddressList()
  },
  methods: {
    getAddressList() {
      addressList().then(res => {
        const data = res.data
        if (data.length) {
          this.addList = res.data
        } else {
          this.addList = []
        }
      })
    },
    changeDef(item) {
      if (!item.isDefault) {
        item.isDefault = true
        // this._addressUpdate(item)
        addressUpdate(item).then(res => {
          this.getAddressList()
        })
      }
      return false
    },
    // 保存
    save(p) {
      if (p.id) {
        addressUpdate(p).then(res => {
          this.getAddressList()
        })
      } else {
        delete p.id
        // this._addressAdd(p)
        addressAdd(p).then(res => {
          this.getAddressList()
        })
      }
      this.popupOpen = false
    },
    // 删除
    del(id, i) {
      addressDel({ id }).then(res => {
        if (res.status === '0') {
          this.addList.splice(i, 1)
        } else {
          alert('删除失败')
        }
      })
    },
    // 修改
    update(item) {
      this.popupOpen = true
      if (item) {
        this.popupTitle = '管理收货地址'
        this.msg.receiver = item.receiver
        this.msg.phone = item.phone
        this.msg.streetName = item.streetName
        this.msg.isDefault = item.isDefault
        this.msg.id = item.id
      } else {
        this.popupTitle = '新增收货地址'
        this.msg.receiver = ''
        this.msg.phone = ''
        this.msg.streetName = ''
        this.msg.isDefault = false
        this.msg.id = ''
      }
    }
  }
}
</script>
<style scoped lang="scss">
  .address-item {
    display: flex;
    align-items: center;
    height: 115px;
    text-align: center;
    .name {
      width: 106px;
    }
    .address-msg {
      flex: 1;
    }
    .telephone {
      width: 160px;
    }
    .defalut {
      width: 80px;
      > a {
        text-align: center;
        /*display: none;*/
      }
    }
    .operation {
      width: 135px;
      a {
        padding: 10px 5px;
      }
    }
    &:hover {
      .defalut > a {
        display: block;
      }
    }
  }

  .address-item + .address-item {
    border-top: 1px solid #CFCFCF;
  }

  .defalut-address {
    color: #626262;
    display: block;
    pointer-events: none;
    cursor: default;
  }

  .md {
    > div {
      text-align: left;
      margin-bottom: 15px;
      > input {
        width: 100%;
        height: 50px;
        font-size: 18px;
        padding: 10px 20px;
        border: 1px solid #ccc;
        border-radius: 6px;
        box-shadow: 0 3px 5px -4px rgba(0, 0, 0, .4) inset, -1px 0 3px -2px rgba(0, 0, 0, .1) inset;
        line-height: 46px;
      }
    }
  }

  .btn {
    margin: 0;
    width: 100%;
    height: 50px;
    font-size: 14px;
    line-height: 48px
  }
</style>
